<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天室</title>
    <link rel="stylesheet" href="../public/css/font/iconfont.css">
    <script src="/socket.io/socket.io.js"></script>
    <script src="/public/js/jquery.min.js"></script>
    <link rel="stylesheet" href="/public/css/bootstrap.min.css">
    
    <style>
        .header{
            width: 88%;
            margin: 0px auto;
            margin-top: 100px;
            border: 1px solid #ccc;
            /* padding-top: 10px; */
            background-color:  #F1FBFB;
            position: relative;
        }
        .header-in{
            width: 100%;
            height: 80px;
            /* border: 1px solid rgb(58, 58, 58); */
            background-color:  #F1FBFB;
            /* padding-top: 18px; */
        }
        .r-box{
            width: 29%;
            height: 160px;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            background-color:  #F1FBFB;
            position: absolute;
            left: 711px;
        }
        .r-box-in{
            width: 75%;
            height: 30px;
            border-bottom: 1px solid #ccc;
            border-left: 1px solid #ccc;
            position: absolute;
            left: 25%;
            top: 0px;
        }
        .gg{
            margin-left: 15px;
            /* text-align: end; */
            margin-top: 5px;
            font-weight: 700;
        }
        .header-er{
            width: 29%;
            /* height: 10px; */
            border-bottom: 1px solid #ccc;
            /* border-top: 2px solid #ccc ; */
            position: absolute;
            left: 711px;
            top: 249px;
            background-color: rgb(217, 250, 250);

        }
        .header-er p{
            font-size: 15px;
            font-weight: 700;
            margin-left: 5px;
            margin-top: 20px;
        }
        textarea{
            height: 60px;
            resize: none;
            outline: none;
            background-color:  #F1FBFB;
            border: 0;
            /* border-top: 1px solid #ccc ; */
            /* margin-top: 100px; */
        }
        .qm{
          font-size: 18px;
          font-weight: 700;
          margin-top: 20px;
          margin-left: 18px;
          /* vertical-align: middle; */
          display: block;
        }
        .send{
          width: 70px;
          margin-left: 5px;
          background-color: #137dff;
          border: 0;
          border-radius: 10px;
          color: #F1FBFB;
        }
        .sand{
      
          margin-left: 78%;
          width: 70px;
          background-color: #137dff;
          border: 0;
          border-radius: 10px;
          color: #F1FBFB;
        }
        .max {
          width: 71%;
          height: 600px;
          /* margin: 0px auto;
          margin-top: 100px; */
          border: 1px solid #ccc;
          /* padding-top: 10px; */
          position: relative;
        }
        .zzz{
          position: absolute;
          top: 500px;
        }
        .ttt{
          width: 100%;
          position: absolute;
          top: 470px;
          border-top:1px solid #ccc ;
        }
        .ttt .iconfont{
            font-size: 22px;
            margin-left: 10px;
            color: rgb(116, 116, 116);
        }
        .tttt{
          margin-left: 76%;
          margin-top: 12px;
        }
        .tttt .iconfont{
            font-size: 26px;
            margin: 0 10px 0 20px ;
            /* margin-top: 100px; */
            /* color: rgb(119, 118, 118); */
            /* color: #137dff; */
        }
        .left {
          width: 100%;
          /* border-bottom: 1px solid #999; */
          height: 20px;
          margin-top: 20px;
        }
        .right {
          width: 100%;
          height: 40px;
          /* border-bottom: 1px solid #999; */
          margin-top: 20px;
        }
        .top {
          width: 100%;
          height: 400px;
        }
        #kuang {
          display: none;
        }
        .l {
          float: left;
          
        }
        .r {
          float: right;
          
        }
        .btn{
          margin-left: 90%;
        }
        .tubiao{

          display: flex;
          /* justify-content: end; */
          /* margin-bottom: 100px; */
          position: absolute;
          left: 94%;
          top:0;
          /* margin-top: 0; */
        }
        .tubiao p{
          margin-left: 12px;
          font-size:  20px; 
        }
        .tubiao-in{

          /* display: flex; */
          /* justify-content: end; */
          /* margin-bottom: 100px; */
          position: absolute;
          left: 93%;
          top:0;
          /* margin-top: 0; */
          }
      </style>
</head>
<body>
    <div class="container">
        <% if(user == null) { %>
            <a href="/login" class="btn btn-info">登录</a>
        <% }else{ %>
            <a href="javascript:;" class="btn btn-info"><%= user %></a>
            <a href="/out" class="btns ">注销</a>
        <% } %>
    <hr>
    <div class="header">
        <div class="header-in">
          <span class="qm">h5 - 72</span>
          <div class="tubiao-in">
            <p class="jjj">_</p>
          </div>
          <div class="tubiao">
            
            <p class="kkk">=</p>
            <p class="lll">x</p>
          </div>
          <div class="tttt">
            <a ><i class="iconfont icon-tianjiayonghu  "></i></a>
            <a ><i class="iconfont icon-24gl-exit "></i></a>
            <a ><i class="iconfont icon-shezhi"></i></a>
            <a ><i class="iconfont icon-jietu"></i></a>
          </div>
        </div>
        <div class="header-er">
            <p>群成员列表(3 / 3)</p>
        </div>
        <div class="r-box">
            <p class="gg">群公告</p>
            <div class="r-box-in"></div>
        </div>
        <div class="max">
            <!-- 聊天的区域 -->
              <div class="top">
                
              </div>
              <!-- 字体图标 -->
              <div class="ttt">
                <a ><i class="iconfont icon-zitiyanse"></i></a>
                <a ><i class="iconfont icon-biaoqing"></i></a>
                <a ><i class="iconfont icon-icon-tupian"></i></a>
                <a ><i class="iconfont icon-jietu1"></i></a>
                <a ><i class="iconfont icon-wenjianjia"></i></a>
                <a ><i class="iconfont icon-24gl-exit"></i></a>  
              </div>
              <!-- 聊天的区域结束 -->
              <!--数据聊天内容的-->
              <div class="zzz">
                <div>

                  <textarea name="" id="val" cols="98" rows="5"></textarea>
                </div>
                <div id="kuang">
                  <!-- 其他人说的话 -->
                   <!-- <div class="left">
                      <span class="l mc"><b>刘备</b>:</span
                      ><span class="mn">宝贝~~想你了</span>
                    </div> -->
                    <!-- 自己的说话 -->
                    <!-- <div class="right">
                      <span class="r cn"><b>:大乔</b></span>
                      <span class="r oc">讨厌~死鬼!</span
                      >
                    </div> -->
                </div>
                <div>
                  
                  <button class="sand">关闭(c)</button>
                  <button class="send">发送(s)</button>
                </div>
              </div>
              
            </div>
    </div>
    
</body>
</html>
<script>
   var user = prompt("输入昵称");
        // 链接socket
        var socket = io.connect("http://localhost:3000")
        // console.log(socket);
        // 1.自己点击发送，将输入的内容right添加到top中
        $('.send').click(function(){
            // console.log($('#val').val(),user)
            $('.top').append(`
                <div class="right">
                    <span class="r cn"><b>:${user}</b></span>
                    <span class="r oc">${$('#val').val()}</span
                    >
                </div>
            `)
           
            
            // 添加订阅，发送自己说的话到服务器，让聊天室其他的人接收
            socket.emit('h5-72',{user,val:$('#val').val()})

            $('#val').val("")
        })

        // 订阅接收服务端信息
        socket.on("h5-72",(msg)=>{
            // console.log(msg);
            $('.top').append(`
                <div class="left">
                    <span class="l mc"><b>${msg.user}</b>:</span
                    ><span class="mn">${msg.val}</span>
                </div>
            `)
        })


        // 给textarea添加键盘回车事件
        $("#val").keyup((e)=>{
            if(e.keyCode == 13){
                $(".send").trigger('click'); //回车让button执行click事件
                return  false;
            }
        })
      
</script>